import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import graph from '../../compontens/data/les-miserables.json'

export default class  GraphChart extends Component {
    initChart = () => {
        var chartDom = document.getElementById(' GraphChartChart');
        this.myChart = echarts.init(chartDom);
        var option = {
          tooltip: {},
          legend: [
            {
              data: graph.categories.map(function (a) {
                return a.name;
              })
            }
          ],
          series: [
            {
              name: 'Les Miserables',
              type: 'graph',
              layout: 'none',
              data: graph.nodes,
              links: graph.links,
              categories: graph.categories,
              roam: true,
              label: {
                show: true,
                position: 'right',
                formatter: '{b}'
              },
              labelLayout: {
                hideOverlap: true
              },
              scaleLimit: {
                min: 0.4,
                max: 2
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3
              }
            }
          ]
        };
        this.myChart.setOption(option);
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
        return (
            <div className='w100 h100' id='GraphChartChart'></div>
        )
    }
}

